/**
 * 成员列表弹层
 * 执行方法:popupMemberRender(data);
 * data是已选人员html结构，会自动分类勾选人员。如果不传参数，默认初始结构。
 */
var memberList = `
<div id="member-select">
    <ul class="member-s-selected-list"></ul>
    <div class="member-s-hd">
        <ul class="tab-title" data-type="member">
            <li class="current">组织架构</li>
            <li>角色</li>
            <li>成员</li>
            <li>动态负责人</li>
        </ul>
        <div class="search"><input type="text" placeholder="搜索"><i class="fa fa-search"></i><i class="fa fa-close clear"></i></div>
    </div>
    <div class="tab-content member-s-bd" data-type="member">
        <div class="tab-item">
            <div id="department" lay-filter="department"></div>
        </div>
        <div class="tab-item" style="display: none;">
            <ul class="layui-form role-list">
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="顾问级" value="顾问级" id="role0" lay-filter="role">
                </li>
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="员工" value="员工" id="role1" lay-filter="role">
                </li>
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="副总" value="副总" id="role2" lay-filter="role">
                </li>
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="总监" value="总监" id="role3" lay-filter="role">
                </li>
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="经理" value="经理" id="role4" lay-filter="role">
                </li>
                <li>
                    <input type="checkbox" name="role" lay-skin="primary" title="主管" value="主管" id="role5" lay-filter="role">
                </li>
            </ul>
        </div>
        <div class="tab-item" style="display: none;">
            <div id="member-transfer"></div>
        </div>
        <div class="tab-item" style="display: none;">
            <div class="dynamic">
                <ul class="tab-title col-l" data-type="dynamic">
                    <li class="current">流程发起人</li>
                    <li>主管</li>
                </ul>
                <div class="tab-content col-r" data-type="dynamic">
                    <div class="tab-item">
                        <ul class="layui-form dynamic-list">
                            <li><input type="checkbox" name="" lay-skin="primary" title="流程发起人" value="流程发起人" id="initiator" lay-filter="initiator"></li>
                        </ul>
                    </div>
                    <div class="tab-item" style="display: none;">
                        <div class="col-r-item">
                            <ul class="tab-title col-r-l" data-type="zg">
                                <li class="current">发起人</li>
                            </ul>
                            <div class="tab-content col-r-r" data-type="zg">
                                <div class="tab-item">
                                    <p>发起人的主管级别：</p>
                                    <ul class="layui-form dynamic-list">
                                        <li><input type="checkbox" name="" lay-skin="primary" title="直接部门主管" value="直接部门主管" id="dynamic_1" lay-filter="dynamic"></li>
                                        <li><input type="checkbox" name="" lay-skin="primary" title="上级部门主管" value="上级部门主管" id="dynamic_2" lay-filter="dynamic"></li>
                                        <li><input type="checkbox" name="" lay-skin="primary" title="三级部门主管" value="三级部门主管" id="dynamic_3" lay-filter="dynamic"></li>
                                        <li><input type="checkbox" name="" lay-skin="primary" title="四级部门主管" value="四级部门主管" id="dynamic_4" lay-filter="dynamic"></li>
                                        <li><input type="checkbox" name="" lay-skin="primary" title="五级部门主管" value="五级部门主管" id="dynamic_5" lay-filter="dynamic"></li>
                                    </ul>                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="member-s-search-result">
    	<div class="empty"><p>搜索部门或成员</p></div>
        <ul class="layui-form role-list" style="display:none;><!--演示结构，搜索结果可以输出此类型结构。同时隐藏empty结构-->
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="顾问级" value="顾问级" id="role0" lay-filter="role">
            </li>
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="员工" value="员工" id="role1" lay-filter="role">
            </li>
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="副总" value="副总" id="role2" lay-filter="role">
            </li>
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="总监" value="总监" id="role3" lay-filter="role">
            </li>
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="经理" value="经理" id="role4" lay-filter="role">
            </li>
            <li>
                <input type="checkbox" name="role" lay-skin="primary" title="主管" value="主管" id="role5" lay-filter="role">
            </li>
        </ul>
    </div>

    <script>
    popupMemberRender = function(parentData){
	    layui.use(['tree','eleTree','util','form','transfer'], function(){
	        var tree = layui.tree,
	            eleTree = layui.eleTree,
	            util = layui.util,
	            form = layui.form,
	            transfer = layui.transfer;

	        form.render();

	        //选中成员列表容器
	        var _mList = $('.member-s-selected-list');

	        //如果已选中成员，重渲染对应结构中的数据进行勾选
	        var _a=[],_b=[],_c=[],_d=[];
            if(parentData){
	        	_mList.html(parentData);
				if(_mList.find('li[data-type="department"]').length > 0){
		        	_mList.find('li[data-type="department"]').map(function(i,d){
		        		_a.push($(d).data('id'));
		        	})
				}

				if(_mList.find('li[data-type="member"]').length > 0){
		        	_mList.find('li[data-type="member"]').map(function(i,d){
		        		_c.push($(d).data('id'));
		        	})
		        	changeMemberTransfer(_c);
				}else{
					changeMemberTransfer();
				}

				if(_mList.find('li[data-type="role"]').length > 0){
		        	_mList.find('li[data-type="role"]').map(function(i,d){
		        		var _id = $(d).data('id');
		        		$('.member-s-bd .role-list').find('input[id="'+_id+'"]').prop('checked',true);
		        	})
	        		form.render('checkbox');
				}

				if(_mList.find('li[data-type="initiator"]').length > 0){
		        	_mList.find('li[data-type="initiator"]').map(function(i,d){
		        		var _id = $(d).data('id');
                        $('.member-s-bd .dynamic').find('input[id="'+_id+'"]').prop('checked',true);
		        	})
                    form.render('checkbox');
				}
            }else{
				changeMemberTransfer();
            }

	        //组织架构
	        var eletreeDep = eleTree({
	            el: '#department',
	            // data:data,
	            url: 'https://eletree.hsianglee.cn/eleTree/json/1.json?v=2.0.12',
	            showCheckbox: true,
	            done:function(){
	            	eletreeDep.setChecked(_a)
	            }
	        });

	        //组织架构当前选中节点数据
	        eletreeDep.on('checkbox',function(d){
	            console.log(d)
	            if(d.data.checked){
	                _mList.append('<li data-id="'+d.data.id+'" data-type="department"><i class="fa fa-user-circle-o"></i><span class="name">'+d.data.label+'</span><a href="javascript:;" class="del layui-icon layui-icon-close-fill" lay-active="delMember"></a></li>');
	            }else{
	                _mList.find('li[data-id="'+d.data.id+'"]').remove();
	            }
	        });  

	        util.event('lay-active',{
	            //已选成员列表中移除
	            delMember:function(othis){
	                var _that = othis.parents('li'),
	                    _id = _that.data('id'),
	                    _type = _that.data('type');
	                switch (_type) {
	                    case 'department':
	                        eletreeDep.unChecked([_id]);
	                        break;
	                    case 'role':
	                        $('.member-s-bd .role-list').find('input[id="'+_id+'"]').prop('checked',false);
	                        form.render('checkbox');
	                        break;
	                    case 'member':
	                        var _arr = [];
	                        _that.siblings('li[data-type="member"]').map(function(d){
	                            _arr.push($(d).data('id'));
	                        })
	                        changeMemberTransfer(_arr)
	                        break;
	                    case 'initiator':
	                        $('.member-s-bd .dynamic').find('input[id="'+_id+'"]').prop('checked',false);
	                        form.render('checkbox');
	                        break;
	                    case 'dynamic':
	                        $('.member-s-bd .dynamic').find('input[id="'+_id+'"]').prop('checked',false);
	                        form.render('checkbox');
	                        break;
	                }
	                _that.remove();
	            },
	        });

	        //角色选择
	        form.on('checkbox(role)', function(data){
	            console.log(data.elem.id)
	            if(data.elem.checked){
	                _mList.append('<li data-id="'+data.elem.id+'" data-type="role"><i class="fa fa-user-circle-o"></i><span class="name">'+data.value+'</span><a href="javascript:;" class="del layui-icon layui-icon-close-fill" lay-active="delMember"></a></li>');
	            }else{
	                _mList.find('li[data-id="'+data.elem.id+'"]').remove();
	            }
	        });

	        //成员选择
	        function changeMemberTransfer(value){
	        	console.log(value)
	            transfer.render({
	                elem: '#member-transfer'
	                ,title: ['全部成员', '已选成员']
	                ,data: [
			            {"value": "1", "title": "李白"}
			            ,{"value": "2", "title": "杜甫"}
			            ,{"value": "3", "title": "苏轼"}
			            ,{"value": "4", "title": "李清照"}
			            ,{"value": "5", "title": "鲁迅", "disabled": true}
			            ,{"value": "6", "title": "巴金"}
			            ,{"value": "7", "title": "冰心"}
			            ,{"value": "8", "title": "矛盾"}
			            ,{"value": "9", "title": "贤心"}
			        ]
	                ,width: 240
	                ,height: 320
	                ,value:value
	                ,onchange: function(data, index){
	                    console.log(data); //得到当前被穿梭的数据
	                    if(index == 0){//如果数据来自左边，index 为 0，否则为 1
	                        data.map(function(d,i){
	                            _mList.append('<li data-id="'+d.value+'" data-type="member"><i class="fa fa-user-circle-o"></i><span class="name">'+d.title+'</span><a href="javascript:;" class="del layui-icon layui-icon-close-fill" lay-active="delMember"></a></li>');
	                        })
	                    }else{
	                        data.map(function(d,i){
	                            _mList.find('li[data-id="'+d.value+'"]').remove();
	                        })
	                    }
	                }
	            })
	        }

	        //动态负责人 - 发起人
	        form.on('checkbox(initiator)', function(data){
	            if(data.elem.checked){
	                _mList.append('<li data-id="'+data.elem.id+'" data-type="initiator"><i class="fa fa-user-circle-o"></i><span class="name">'+data.value+'</span><a href="javascript:;" class="del layui-icon layui-icon-close-fill" lay-active="delMember"></a></li>');
	            }else{
	                _mList.find('li[data-id="'+data.elem.id+'"]').remove();
	            }
	        });
	        //动态负责人 - 主管
	        form.on('checkbox(dynamic)', function(data){
	            if(data.elem.checked){
	                _mList.append('<li data-id="'+data.elem.id+'" data-type="initiator"><i class="fa fa-user-circle-o"></i><span class="name">'+data.value+'</span><a href="javascript:;" class="del layui-icon layui-icon-close-fill" lay-active="delMember"></a></li>');
	            }else{
	                _mList.find('li[data-id="'+data.elem.id+'"]').remove();
	            }
	        });

	        //搜索
	        $('.member-s-hd .search input').on({
				focus:function(){
	        		$(this).parent().addClass('full');
	        		$('.member-s-search-result').show();
				},
				blur:function(){
					var _val = $(this).val();
					if(_val == ''){
						$(this).parent().removeClass('full');
						$('.member-s-search-result').hide();
					}
				}
	        })
	        $('.member-s-hd .search .clear').on('click',function(){
	        	$(this).siblings('input').val('');
	        	$(this).parent().removeClass('full');
				$('.member-s-search-result .empty').show();
				$('.member-s-search-result ul').hide();
	        	$('.member-s-search-result').hide();
	        });
	        $(document).on('input propertychange','.member-s-hd .search input',function() {
				var _val = $(this).val();
				console.log(_val)
				//演示事件，input输入时候隐藏empty，显示搜索的结果
				if(_val == ''){
					$('.member-s-search-result .empty').show();
					$('.member-s-search-result ul').hide();
				}else{
					$('.member-s-search-result .empty').hide();
					$('.member-s-search-result ul').show();
				}
        	});

	    });
    }
    </script>    
</div>`;